<template>
  <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
      class="order-list"
  >
    <div v-for="(order,index) in orderList" :key="index" class="order-list-container">
      <van-row type="flex" justify="space-between">
        <van-col>订单编号：{{ order.orderNo }}</van-col>
        <van-col>{{ formatStatus(order.status) }}</van-col>
      </van-row>
      <van-row>
        <van-col :span="4"><van-icon size="40px" :name = "order.image"/></van-col>
        <van-col :span="20">{{ order.desc }}</van-col>
      </van-row>
      <van-row type="flex" justify="space-between">
        <van-col><span v-if="order.status === 'done'">实付金额：{{ order.price + '元'}}</span></van-col>
        <van-col><van-button type="primary" size="mini" @click="goToCard">{{ btnName(order.status) }}</van-button></van-col>
      </van-row>
    </div>
  </van-list>
</template>

<script>
import {getOrderList} from "@/api/order";

export default {
  name: "OrderList",
  inject: ['orderStatus'],
  props: {
    status: String
  },
  data() {
    return {
      finished: false,
      loading: true,
      orderList: []
    }
  },
  created() {
    this.getOrderList()
  },
  methods: {
    btnName(status) {
      if(status === 'unpaid'){
        return '立即支付'
      }
      if(status === 'unActive'){
        return '立即激活'
      }
      return '立即查看'
    },
    formatStatus(status) {
      return this.orderStatus[status]
    },
    onLoad() {
      // this.getOrderList()
    },
    getOrderList() {
      let reqStatus = ''
      if (this.status !== 'all') {
        reqStatus = this.status
      }
      getOrderList(reqStatus).then(res => {
        this.orderList = res.data
        this.finished = true
      })
    },
    goToCard() {
      this.$router.push('/card')
    }
  }
}
</script>

<style lang="less" scoped>
.order-list{
  &-container{
    padding-left: 15px;
    padding-right: 15px;
    background-color: #FFFFFF;
    font-size: 14px;
    margin-bottom: 10px;

    .van-row{
      padding-top: 5px;
      padding-bottom: 5px;
    }
  }
}
</style>